<template>
	<view class="grid-list tn-mt-xl  " >
		<view  class="  tn-mb-lg   " v-for="(item, index) in dataList" :key="index"><text class="grid-title tn-mb-xl  tn-gray_text">{{ item.title }}</text> <!-- 功能标题 -->
		<view class="grid-container  tn-mt-lg">
			<view class="grid-item" v-for="(item, index) in item.children" :key="index" @click="tnParamById(item.url, carPark.id)">
			 
				<view class="icon13__item--icon  " :style="'background-color:'+ item.color +';'">
					<view class=" ">
						<tn-icon :name="item.icon" size="60" color="tn-white" />
					</view>
				</view>
				<view class="tn-gray-dark_text tn-text-center tn-text-df">
					<text class="tn-text-ellipsis">{{ item.title }}</text>
				</view>
			</view>

		</view></view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from "vue";
	import { tnParamById } from '@/utils/tnUtil';

  const props = defineProps({
		title: {
			type: String,
			default: '功能列表' // 默认标题
		},
		dataList: {
			type: Array,
			default: () => []
		},
    carPark: {
      id: 0,
      name: ''
    }
	});
</script>

<style lang="scss" scoped>
	.grid-list {
		background-color: white;
		border-radius: 30rpx 30rpx ;
		/* 九宫格底色为白色 */
		padding: 20rpx;
	}

	.grid-title {
	 
		font-weight: bold;
		/* 标题加粗 */ 
		text-align: left;
		/* 左对齐 */
		margin-bottom: 20rpx;
		/* 标题与九宫格的间距 */
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 三列布局 */
		gap: 0rpx;
		/* 网格间距 */
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 居中对齐 */
		justify-content: center;
		/* 垂直居中 */
		text-align: center;
		/* 文字居中 */
		background-color: white;
		/* 九宫格底色为白色 */
		padding: 10rpx;
		/* 内边距 */
	}

	.grid-item-text {
		margin-top: 5rpx;
		/* 图标与文字的间距 */
		font-size: 16px;
		/* 文字大小 */
	}
 

	.icon13 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 80rpx;
				height: 80rpx;
				font-size: 56rpx;

				position: relative;
				z-index: 1;
				border-radius: 43% 57% 43% 57% / 57% 43% 57% 43%;
				margin-bottom: 18rpx;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);

				}

			}

		}
	}

</style>
